<template>
    <div class="Search">
        <div class="SearchView" :style="{background:list.SearchColor,}">
            <div class="SearchItem" :style="{'border-color':list.BorderColor,'border': list.isBorder == true?'1px solid'+list.BorderColor:'',background:list.backgroundInput,'border-radius': list.InputStyle == null || list.InputStyle == ''?0:list.InputStyle+'px' }">
                <i class="el-icon-search" :style="{color:list.InputTextColor}"></i>
                <input type="text" :value="list.title ==null || list.title == ''?'请输入内容':list.title" :style="{background:list.backgroundInput,color:list.InputTextColor,'text-align':list.InputTextAligh}">
                <i v-if="list.clearabled" class="el-icon-circle-close" style="color: #999;"></i>
            </div>
            <span class="SearchText" v-if="list.action" :style="{color:list.actionColor}">搜索</span>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'Search',
        props: ['data'],
        data() {
            return {
                list: {}
            }
        },
        mounted() {
            this.list = this.data
        }
    }
</script>

<style lang="less" scoped>
    .Search {
        .SearchView {
            flex: 1;
            padding: 10px;
            background: #fff;
            display: flex;
            align-items: center;
            border-bottom: 1px solid #f5f5f5;

            .SearchItem {
                flex: 1;
                border-radius: 20px;
                overflow: hidden;
                padding: 0 10px;
                display: flex;
                align-items: center;

                /* border: 1px solid #ccc; */
                /* border-width: 1; */
                /* border-style: solid; */
                input {
                    height: 35px;
                    flex: 1;
                    padding: 0 10px;
                    width: 100%;
                    border: 0;
                    font-size: 14px;
                }
            }

            .SearchText {
                padding-left: 10px;
                /* color: #444; */
            }
        }
    }
</style>